<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Login - Online EV</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="../..//static/css/login.css">
</head>

<body class="my-login-page">
	<!-- loading mask before the page fully loaded -->
	<div class="justify-content-center text-center align-items-center " id="loading-mask">
		<div class="sr-only lead" id="loading-text">Loading...</div>
		<div class="spinner-border" role="status" id="loading-spinner"></div>
	</div>

		<div class="alert alert-success rounded notification-alert text-center mx-auto" role="alert" align="center"></div>

	<section class="h-100">
		<div class="container h-100">
			<div class="row justify-content-sm-center h-100">
				<div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">

					<div class="text-center my-5 brand">
						<img src="../../static/img/logo.jpg" alt="logo" class="rounded-circle" width="100">
					</div>

					<div class="card fat shadow-lg">
						<div class="card-body p-5">
							<h1 class="fs-4 card-title fw-bold mb-4">Login</h1>
							<form method="POST" class="needs-validation" novalidate="" autocomplete="on" action="/auth/login-post">
								<div class="mb-3">
									<label class="mb-2 text-muted" for="username">Username</label>
									<input id="username" type="text" pattern=".{1,64}" class="form-control rounded-pill" name="username" value="" required autofocus>
									<div class="invalid-feedback" id="client-username">
										Invalid Username, 1 to 64 characters
									</div>
									<div class="invalid-feedback" id="username-feedback">	
									</div>
								</div>

								<div class="mb-3">
									<div class="mb-2 w-100">
										<label class="text-muted" for="password">Password</label>
									</div>
									<input id="password" type="password" pattern=".{6,}" class="form-control rounded-pill" name="password" required>
								    <div class="invalid-feedback" id="client-password">
								    	Invalid Password, at least 6 characters
							    	</div>
									<div class="invalid-feedback" id="password-feedback">
									</div>
								</div>

								<div class="d-flex align-items-center">
									<div class="form-check">
										<input type="checkbox" name="remember" id="remember" class="form-check-input">
										<label for="remember" class="form-check-label">Remember Me</label>
									</div>

									<button type="submit" class="btn btn-primary ms-auto rounded-pill shadow">
										Login
									</button>

								</div>
							</form>
						</div>
						<div class="card-footer py-3 border-0">
							<div class="text-center">
								Don't have an account? <a href="/auth/register" class="text-dark">Create One</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<script src="../../static/scripts/login.js"></script>
</body>
</html>
